<template>
  <div class="success">
    <div class="center ">
      <img src="@/assets/images/comm/done.png">
      <div class="tip">设计完成</div>
      <div class="tip-detail">此处展示提示相关描述信息，可能会超过一行</div>
      <div class="btn pointer" @click="toClick">查看方案（{{ count }}s）</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue"
const count = ref(3)
onMounted(() => {
  count.value = 3
  let t = setInterval(() => {
    count.value -= 1
    if (count.value <= 0) {
      toClick()
      clearInterval(t)
    }
  }, 1000);
})
const emtis = defineEmits<{
  (e: 'toClick')
}>()
const toClick = () => {
  console.log("跳转了")
  emtis('toClick')
}

</script>
<style lang="scss" scoped>
.success {
  width: 90vw;
  height: 80vh;
  position: relative;

  .center {
    // width: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 71px;

    .btn {
      width: 118px;
      height: 28px;
      background-color: #F1F2F8;
      border-radius: 4px;
      text-align: center;
      line-height: 28px;
      font-size: 12px;
      font-weight: 400;
      color: #555;
      margin-top: 30px;
    }

    .tip {
      font-weight: 600;
      font-size: 18px;
    }

    .tip-detail {
      color: #C1C5D9;
      font-size: 14px;
      font-weight: 400;
      margin-top: 10px;
    }

    img {
      width: 140px;
      height: 140px;
    }

  }

}
</style>